<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>105-好看的边框阴影</title>
    <style>
      .box li {
        width: 500px;
        height: 100px;
        margin: 16px;
      }

      .shadow1 {
        box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);
      }

      .shadow2 {
        box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
      }

      .shadow3 {
        box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1), 0 0 4px 0 rgba(0, 0, 0, 0.1);
      }

      .shadow4 {
        box-shadow: 0px 6px 20px rgb(36 37 38 / 13%);
      }
    </style>
  </head>

  <body>
    <ol class="box">
      <li class="shadow1"></li>
      <li class="shadow2"></li>
      <li class="shadow3"></li>
      <li class="shadow4"></li>
    </ol>
    <script></script>
  </body>
</html>
